<template>
  <div class="canvas-wrapper">
    <canvas id="can" ref="canvas"></canvas>
  </div>
</template>

<script>
import canvasFun from './canvas-rain'
export default {
  mounted() {
    this.initRain()
  },
  beforeDestroy() {
    canvasFun.stop()
  },
  methods: {
    initRain() {
      var canDom = this.$refs.canvas
      var ctx = canDom.getContext('2d')
      var w = (canDom.width = 700)
      var h = (canDom.height = 500)

      // 画板适应宽度
      // window.onresize = function () {
      //   w = canDom.width = window.innerWidth
      //   h = canDom.height = window.innerHeight
      // }

      canvasFun.star(w, h, ctx)
    }
  }
}
</script>

<style lang="scss">
* {
  margin: 0px;
  padding: 0px;
}

.canvas-wrapper {
  background: #000;
  width: 700px;
  height: 500px;
  margin: 0 auto;
}
</style>
